﻿@{
	Layout = null;
}
<div class="uk-grid uk-grid-small">
	<div class="uk-width-1-2 uk-grid uk-grid-small left-side">
		<div id="canvasContainer" class="uk-width-1-1">
			<div id="painterName" class="painter-name"></div>
			<canvas id="canvas" class="painter-canvas" width="500" height="500"></canvas>
		</div>
		<div id="tools" class="uk-width-1-1">
			<div class="uk-grid uk-grid-small">
				<div class="uk-width-1-10">
					<div class="brush-preview" style="background-image: url(/Content/Images/opacitybg.png);">
						<div id="brush" style="width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; background-color: black;"></div>
					</div>
				</div>
				<div class="uk-width-4-10">
					<div class="uk-grid uk-grid-small uk-grid-width-1-6">
						<div>
							<button class="uk-button uk-button-small color picker" id="colorPicker"></button>
						</div>
						<div>
							<button class="uk-button uk-button-small color black" id="black"></button>
						</div>
						<div>
							<button class="uk-button uk-button-small color red" id="red"></button>
						</div>
						<div>
							<button class="uk-button uk-button-small color green" id="green"></button>
						</div>
						<div>
							<button class="uk-button uk-button-small color yellow" id="yellow"></button>
						</div>
						<div>
							<button class="uk-button uk-button-small color blue" id="blue"></button>
						</div>
					</div>
				</div>
				<div class="uk-width-3-10">
					<input type="range" min="3" max="20" value="3" step="0.1" />
				</div>
				<button class="uk-button uk-button-small uk-width-2-10" id="clear"><i class="uk-icon-eraser"></i>&nbsp;Очистить</button>
				<div id="overlayTools" class="uk-overlay-area overlay-tool">
					<div class="uk-overlay-area"></div>
				</div>
			</div>
		</div>
		<div id="cancasOvelray" class="uk-overlay-area overlay-canvas" style="display: none; opacity: 1;">
			<div class="uk-overlay-area-content">
				<ul class="uk-width-3-5 uk-container-center uk-text-large uk-text-left user-list"></ul>
				<div class="uk-width-3-5 uk-container-center uk-margin-large-top uk-text-large uk-text-left round-result" style="padding-left: 30px;">
					<div class="uk-grid uk-grid-small">
						<div class="uk-width-1-1 uk-text-center" id="roundCount"></div>
						<div class="uk-width-1-2">Слово</div>
						<div class="uk-width-1-2"><span id="rigthWord">&nbsp;</span></div>
						<div class="uk-width-1-2">Рисовал</div>
						<div class="uk-width-1-2"><span id="painter">&nbsp;</span></div>
						<div class="uk-width-1-2">Угадал</div>
						<div class="uk-width-1-2"><span id="winner">&nbsp;</span></div>
					</div>
				</div>
				<div class="uk-width-3-5 uk-container-center uk-margin-large-top uk-text-large round-result">
					Поделись рисунком!
				</div>
				<div class="uk-width-3-5 uk-margin-small-top uk-container-center uk-text-large round-result">
					<div class="uk-grid uk-grid-small">
						<div class="uk-width-9-10">
							<input id="imageulrInput" readonly="readonly" type="text" value="" class="uk-width-1-1" style="color: black; height: 30px;"/>
						</div>
							<a id="imageulr" href="" title="share" target="_blank" class="uk-width-1-10 uk-button uk-button-primary" style="padding: 0;">
								<img src="@Url.Content("~/Content/Images/share.svg")" alt="share" width="20"/>
							</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="uk-width-1-2 right-side">
		<div class="uk-grid uk-grid-small">
			<div class="uk-width-1-1">
				<div id="word" class="word"></div>
			</div>
			<div class="uk-width-1-1 uk-margin-small-bottom uk-margin-small-top">
				<div class="uk-progress uk-progress-mini uk-active">
					<div class="uk-progress-bar" id="progress"></div>
				</div>
			</div>
		</div>
		<div class="uk-margin-small-bottom uk-scrollable-box chat-container">
			<ul id="chat">
			</ul>
		</div>
		<div class="uk-form">
			<div class="uk-grid uk-grid-small">
				<div class="uk-width-8-10">
					<input type="text" class="uk-form-small uk-width-1-1" placeholder="" id="message">
				</div>
				<div class="uk-width-2-10">
					<button class="uk-button uk-button-small uk-button-primary uk-width-1-1" id="send">Отправить</button>
				</div>
			</div>
		</div>
		<div id="chooseWordOverlay" class="uk-overlay-area overlay-words">
			<div class="uk-overlay-area-content">
				<div class="uk-grid">
					<div class="uk-width-1-1">
						<p class="uk-text-large">Выберите слово, которое хотите изобразить</p>
					</div>
					<div class="uk-width-1-1 uk-margin-top">
						<button id="word1" class="uk-button uk-button-large uk-button-primary uk-width-2-5"></button>
					</div>
					<div class="uk-width-1-1 uk-margin-top">
						<button id="word2" class="uk-button uk-button-large uk-button-primary uk-width-2-5"></button>
					</div>
					<div class="uk-width-1-1 uk-margin-top">
						<button id="word3" class="uk-button uk-button-large uk-button-primary uk-width-2-5"></button>
					</div>
					<div class="uk-width-1-1 uk-margin-top">
						<div id="wordCountdown" style="font-size: 2em;">0:10</div>
					</div>
					<div class="uk-width-1-1 uk-margin-top">
						<div class="uk-width-2-5 uk-container-center">
							<button id="skipbutton" class="uk-button uk-button-danger">Пропустить</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="stopGameOverlay" class="uk-overlay-area overlay-words">
			<div class="uk-overlay-area-content">
				<div class="uk-grid">
					<div class="uk-width-1-1 uk-text-large">
						<p id="stopGameMessage"></p>
					</div>
					<div class="uk-width-1-1 uk-margin-top">
						<button id="gameNow" class="uk-button uk-button-large uk-button-primary uk-width-2-5"></button>
					</div>
					<div class="uk-width-1-1 uk-margin-top">
						<p>Понравилось? Поделитесь ссылкой и играйте с друзьями</p>
					</div>
					<div class="uk-width-1-1 uk-margin-small-top">
						<div class="social-likes uk-margin-small-top" data-url="http://drawpi.co">
							<div class="facebook" style="margin-right: 0;" title="Поделиться ссылкой на Facebook"></div>
							<div class="twitter" style="margin: 0;" data-via="drawpico" data-related="drawpico" title="Поделиться ссылкой в Twitter"></div>
							<div class="vkontakte" style="margin: 0;" title="Поделиться ссылкой во ВКонтакте"></div>
							<div class="plusone" style="margin: 0;" title="Поделиться ссылкой в Google+"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="overlayGame" class="uk-overlay-area" style="display: block;">
		<div class="uk-overlay-area-content">
			<div class="uk-grid uk-grid-small" style="margin-left: -30px;">
				<div class="uk-width-1-1 uk-text-center">
					<div class="uk-text-large">Комната создана</div>
					<div class="uk-text-middle uk-margin-top">Ожидание опонентов</div>
					<div class="loader-outer uk-margin-top">
						<div class="loader-animation">
							<div class="loader-linebar"></div>
							<div class="loader-linebar"></div>
							<div class="loader-linebar"></div>
							<div class="loader-linebar"></div>
							<div class="loader-linebar"></div>
							<div class="loader-linebar"></div>
						</div>
					</div>
					<div class="uk-text-center uk-margin-top">Расскажите о нас в социальных сетях и здесь будет еще больше людей</div>
					<div class="social-likes uk-margin-small-top" data-url="http://drawpi.co">
						<div class="facebook" title="Поделиться ссылкой на Facebook">&nbsp;Facebook&nbsp;&nbsp;</div>
						<div class="twitter" data-via="drawpico" data-related="drawpico" title="Поделиться ссылкой в Twitter">&nbsp;Twitter&nbsp;&nbsp;</div>
						<div class="vkontakte" title="Поделиться ссылкой во ВКонтакте">&nbsp;ВКонтакте&nbsp;&nbsp;</div>
						<div class="plusone" title="Поделиться ссылкой в Google+">&nbsp;Google+&nbsp;&nbsp;</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
